import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Camera, MapPin, Star, Heart, Share2, Upload, Eye, Users, Calendar, Clock, Award, Filter, Search, Grid, List } from 'lucide-react'

const TheaterVision = () => {
  const [activeTab, setActiveTab] = useState('explore')
  const [selectedTheater, setSelectedTheater] = useState(null)
  const [viewMode, setViewMode] = useState('grid')

  const tabs = [
    { id: 'explore', name: '探索剧场', icon: MapPin },
    { id: 'upload', name: '上传视野', icon: Upload },
    { id: 'my-views', name: '我的视野', icon: Eye },
    { id: 'community', name: '社区动态', icon: Users }
  ]

  const theaters = [
    {
      id: 1,
      name: '国家大剧院',
      location: '北京西城区',
      type: '国家级',
      image: '🏛️',
      totalViews: 1250,
      rating: 4.8,
      featured: true
    },
    {
      id: 2,
      name: '梅兰芳大剧院',
      location: '北京西城区',
      type: '专业京剧',
      image: '🎭',
      totalViews: 890,
      rating: 4.9,
      featured: true
    },
    {
      id: 3,
      name: '上海大剧院',
      location: '上海黄浦区',
      type: '综合剧院',
      image: '🎪',
      totalViews: 2100,
      rating: 4.7,
      featured: false
    },
    {
      id: 4,
      name: '长安大戏院',
      location: '北京东城区',
      type: '传统京剧',
      image: '🏮',
      totalViews: 1560,
      rating: 4.9,
      featured: true
    }
  ]

  const theaterViews = [
    {
      id: 1,
      theaterId: 1,
      seatInfo: {
        section: '一层池座',
        row: '第3排',
        seat: '15号',
        price: '¥580'
      },
      user: {
        name: '京剧爱好者小王',
        avatar: '👨',
        verified: true
      },
      images: [
        { url: '/api/placeholder/400/300', alt: '舞台视角' },
        { url: '/api/placeholder/400/300', alt: '座位环境' }
      ],
      review: {
        rating: 5,
        content: '视野绝佳！正对舞台中央，演员表情清晰可见，音响效果震撼。强烈推荐这个位置！',
        tags: ['视野极佳', '音响震撼', '推荐']
      },
      performance: {
        title: '《贵妃醉酒》',
        date: '2024-01-15',
        time: '19:30'
      },
      stats: {
        likes: 89,
        shares: 23,
        views: 156
      },
      createdAt: '2024-01-16'
    },
    {
      id: 2,
      theaterId: 2,
      seatInfo: {
        section: '二层楼座',
        row: '第2排',
        seat: '8号',
        price: '¥380'
      },
      user: {
        name: '传统文化传承者',
        avatar: '👩',
        verified: true
      },
      images: [
        { url: '/api/placeholder/400/300', alt: '舞台全景' },
        { url: '/api/placeholder/400/300', alt: '座位细节' }
      ],
      review: {
        rating: 4,
        content: '楼座视角不错，能看到舞台全貌。虽然距离稍远，但整体观演体验很好。',
        tags: ['全景视野', '性价比高', '推荐']
      },
      performance: {
        title: '《霸王别姬》',
        date: '2024-01-20',
        time: '19:30'
      },
      stats: {
        likes: 67,
        shares: 15,
        views: 234
      },
      createdAt: '2024-01-21'
    }
  ]

  const seatMap = {
    '一层池座': {
      sections: ['A区', 'B区', 'C区'],
      rows: ['第1排', '第2排', '第3排', '第4排', '第5排'],
      seats: ['1-20号']
    },
    '二层楼座': {
      sections: ['A区', 'B区', 'C区'],
      rows: ['第1排', '第2排', '第3排'],
      seats: ['1-15号']
    },
    '三层楼座': {
      sections: ['A区', 'B区'],
      rows: ['第1排', '第2排'],
      seats: ['1-10号']
    }
  }

  return (
    <div className="min-h-screen pt-16 theme-community">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-6xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
            剧场视野
          </h1>
          <p className="text-xl text-jing-white/80 max-w-3xl mx-auto jing-content">
            🎭 真实座位视角，让每一次观演都成为完美体验
            <br />
            📸 用户共创的剧场视野数据库，解决盲选座位痛点
          </p>
        </motion.div>

        {/* 标签页导航 */}
        <motion.div
          className="jing-card mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <div className="flex space-x-1 bg-white/10 p-1 rounded-lg">
            {tabs.map((tab) => {
              const Icon = tab.icon
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex-1 flex items-center justify-center space-x-2 py-3 px-4 rounded-lg transition-all duration-300 ${
                    activeTab === tab.id
                      ? 'bg-zhu-hong text-jing-white'
                      : 'text-jing-white/70 hover:text-jing-white hover:bg-white/10'
                  }`}
                >
                  <Icon size={18} />
                  <span>{tab.name}</span>
                </button>
              )
            })}
          </div>
        </motion.div>

        {/* 内容区域 */}
        {activeTab === 'explore' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            {/* 搜索和筛选 */}
            <div className="jing-card">
              <div className="flex flex-col md:flex-row gap-4">
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-jing-white/60" size={20} />
                  <input
                    type="text"
                    placeholder="搜索剧场、演出、座位..."
                    className="jing-input w-full pl-10"
                  />
                </div>
                <div className="flex gap-2">
                  <button className="flex items-center space-x-2 glass-effect px-4 py-3 rounded-lg text-jing-white hover:bg-white/20 transition-all">
                    <Filter size={18} />
                    <span>筛选</span>
                  </button>
                  <button 
                    onClick={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
                    className="flex items-center space-x-2 glass-effect px-4 py-3 rounded-lg text-jing-white hover:bg-white/20 transition-all"
                  >
                    {viewMode === 'grid' ? <List size={18} /> : <Grid size={18} />}
                    <span>{viewMode === 'grid' ? '列表' : '网格'}</span>
                  </button>
                </div>
              </div>
            </div>

            {/* 推荐剧场 */}
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-jing-white mb-6">推荐剧场</h2>
              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {theaters.map((theater, index) => (
                  <motion.div
                    key={theater.id}
                    className={`p-6 rounded-xl border-2 cursor-pointer transition-all ${
                      selectedTheater?.id === theater.id
                        ? 'border-zhu-hong bg-zhu-hong/20'
                        : 'border-white/20 hover:border-white/40'
                    }`}
                    onClick={() => setSelectedTheater(theater)}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                    whileHover={{ scale: 1.02 }}
                  >
                    <div className="text-center mb-4">
                      <div className="text-4xl mb-2">{theater.image}</div>
                      <h3 className="text-lg font-bold text-jing-white mb-1">{theater.name}</h3>
                      <p className="text-jing-white/70 text-sm mb-2">{theater.location}</p>
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        theater.featured 
                          ? 'bg-jing-gold/20 text-jing-gold' 
                          : 'bg-shi-qing/20 text-shi-qing'
                      }`}>
                        {theater.type}
                      </span>
                    </div>
                    <div className="space-y-2 text-sm text-jing-white/70">
                      <div className="flex justify-between">
                        <span>视野数量</span>
                        <span className="text-jing-white">{theater.totalViews}</span>
                      </div>
                      <div className="flex justify-between">
                        <span>用户评分</span>
                        <div className="flex items-center space-x-1">
                          <Star size={14} className="text-jing-gold" />
                          <span className="text-jing-white">{theater.rating}</span>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* 剧场视野展示 */}
            {selectedTheater && (
              <div className="jing-card">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-2xl font-bold text-jing-white">
                    {selectedTheater.name} - 真实视野
                  </h2>
                  <button className="jing-button flex items-center space-x-2">
                    <Upload size={18} />
                    <span>上传我的视野</span>
                  </button>
                </div>

                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {theaterViews.filter(view => view.theaterId === selectedTheater.id).map((view, index) => (
                    <motion.div
                      key={view.id}
                      className="glass-effect rounded-xl overflow-hidden group cursor-pointer"
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.6, delay: index * 0.1 }}
                      whileHover={{ y: -5 }}
                    >
                      {/* 视野图片 */}
                      <div className="relative h-48 bg-gradient-to-br from-zhu-hong/20 to-shi-qing/20">
                        <div className="absolute inset-0 flex items-center justify-center">
                          <div className="text-6xl opacity-50">📸</div>
                        </div>
                        <div className="absolute top-4 right-4 bg-mo-hei/80 text-jing-white px-2 py-1 rounded-full text-sm">
                          {view.seatInfo.section}
                        </div>
                      </div>

                      {/* 视野信息 */}
                      <div className="p-4">
                        <div className="flex items-center justify-between mb-3">
                          <div>
                            <h3 className="text-lg font-bold text-jing-white">
                              {view.seatInfo.section} {view.seatInfo.row} {view.seatInfo.seat}
                            </h3>
                            <p className="text-jing-white/70 text-sm">{view.seatInfo.price}</p>
                          </div>
                          <div className="flex items-center space-x-1">
                            <Star size={16} className="text-jing-gold" />
                            <span className="text-jing-white font-semibold">{view.review.rating}</span>
                          </div>
                        </div>

                        <p className="text-jing-white/80 text-sm mb-3 line-clamp-2">
                          {view.review.content}
                        </p>

                        <div className="flex flex-wrap gap-1 mb-3">
                          {view.review.tags.map((tag, idx) => (
                            <span key={idx} className="px-2 py-1 bg-zhu-hong/20 text-zhu-hong rounded-full text-xs">
                              {tag}
                            </span>
                          ))}
                        </div>

                        <div className="flex items-center justify-between text-sm text-jing-white/60">
                          <div className="flex items-center space-x-3">
                            <span className="flex items-center space-x-1">
                              <Heart size={14} />
                              <span>{view.stats.likes}</span>
                            </span>
                            <span className="flex items-center space-x-1">
                              <Share2 size={14} />
                              <span>{view.stats.shares}</span>
                            </span>
                            <span className="flex items-center space-x-1">
                              <Eye size={14} />
                              <span>{view.stats.views}</span>
                            </span>
                          </div>
                          <span>{view.createdAt}</span>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </div>
            )}
          </motion.div>
        )}

        {activeTab === 'upload' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-jing-white mb-6">上传我的剧场视野</h2>
              <div className="space-y-6">
                {/* 选择剧场 */}
                <div>
                  <label className="block text-jing-white/80 mb-2">选择剧场</label>
                  <select className="jing-input w-full">
                    <option>请选择剧场</option>
                    {theaters.map(theater => (
                      <option key={theater.id} value={theater.id}>{theater.name}</option>
                    ))}
                  </select>
                </div>

                {/* 座位信息 */}
                <div className="grid md:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-jing-white/80 mb-2">座位区域</label>
                    <select className="jing-input w-full">
                      <option>一层池座</option>
                      <option>二层楼座</option>
                      <option>三层楼座</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-jing-white/80 mb-2">排数</label>
                    <select className="jing-input w-full">
                      <option>第1排</option>
                      <option>第2排</option>
                      <option>第3排</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-jing-white/80 mb-2">座位号</label>
                    <input type="text" className="jing-input w-full" placeholder="如：15号" />
                  </div>
                </div>

                {/* 演出信息 */}
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-jing-white/80 mb-2">演出名称</label>
                    <input type="text" className="jing-input w-full" placeholder="如：《贵妃醉酒》" />
                  </div>
                  <div>
                    <label className="block text-jing-white/80 mb-2">观演日期</label>
                    <input type="date" className="jing-input w-full" />
                  </div>
                </div>

                {/* 上传照片 */}
                <div>
                  <label className="block text-jing-white/80 mb-2">上传视野照片</label>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {[1, 2, 3, 4].map((item) => (
                      <div key={item} className="aspect-square glass-effect rounded-lg flex items-center justify-center cursor-pointer hover:bg-white/10 transition-all">
                        <div className="text-center">
                          <Camera size={32} className="text-jing-white/60 mx-auto mb-2" />
                          <div className="text-jing-white/60 text-sm">上传照片 {item}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 评价内容 */}
                <div>
                  <label className="block text-jing-white/80 mb-2">观演评价</label>
                  <textarea
                    className="jing-input w-full h-32 resize-none"
                    placeholder="分享您的观演体验，包括视野效果、音响质量、整体感受等..."
                  />
                </div>

                {/* 评分和标签 */}
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-jing-white/80 mb-2">综合评分</label>
                    <div className="flex space-x-2">
                      {[1, 2, 3, 4, 5].map((star) => (
                        <button key={star} className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                          <Star size={20} className="text-jing-gold" />
                        </button>
                      ))}
                    </div>
                  </div>
                  <div>
                    <label className="block text-jing-white/80 mb-2">体验标签</label>
                    <div className="flex flex-wrap gap-2">
                      {['视野极佳', '音响震撼', '性价比高', '推荐', '视野一般', '音响一般'].map((tag) => (
                        <button key={tag} className="px-3 py-1 glass-effect rounded-full text-jing-white hover:bg-zhu-hong/20 hover:text-zhu-hong transition-all">
                          {tag}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>

                {/* 提交按钮 */}
                <div className="flex space-x-4">
                  <button className="jing-button flex items-center space-x-2">
                    <Upload size={18} />
                    <span>发布视野</span>
                  </button>
                  <button className="glass-effect px-6 py-3 rounded-lg text-jing-white hover:bg-white/20 transition-all">
                    保存草稿
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}

        {activeTab === 'my-views' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-jing-white mb-6">我的剧场视野</h2>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {theaterViews.map((view, index) => (
                  <motion.div
                    key={view.id}
                    className="glass-effect rounded-xl overflow-hidden"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                  >
                    <div className="relative h-48 bg-gradient-to-br from-zhu-hong/20 to-shi-qing/20">
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="text-6xl opacity-50">📸</div>
                      </div>
                      <div className="absolute top-4 right-4 bg-mo-hei/80 text-jing-white px-2 py-1 rounded-full text-sm">
                        {view.seatInfo.section}
                      </div>
                    </div>
                    <div className="p-4">
                      <h3 className="text-lg font-bold text-jing-white mb-2">
                        {view.seatInfo.section} {view.seatInfo.row} {view.seatInfo.seat}
                      </h3>
                      <p className="text-jing-white/70 text-sm mb-3">{view.performance.title}</p>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-1">
                          <Star size={16} className="text-jing-gold" />
                          <span className="text-jing-white font-semibold">{view.review.rating}</span>
                        </div>
                        <div className="flex space-x-2">
                          <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                            <Eye size={16} className="text-jing-white" />
                          </button>
                          <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                            <Share2 size={16} className="text-jing-white" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        )}

        {activeTab === 'community' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-jing-white mb-6">社区动态</h2>
              <div className="space-y-4">
                {[
                  { user: '京剧爱好者小王', action: '上传了新的剧场视野', theater: '国家大剧院', time: '2小时前' },
                  { user: '传统文化传承者', action: '分享了观演心得', theater: '梅兰芳大剧院', time: '5小时前' },
                  { user: '国潮设计师', action: '获得了视野达人徽章', theater: '', time: '1天前' }
                ].map((activity, index) => (
                  <motion.div
                    key={index}
                    className="p-4 glass-effect rounded-lg"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                  >
                    <div className="flex items-center space-x-3">
                      <div className="w-10 h-10 jing-gradient rounded-full flex items-center justify-center text-jing-white font-bold">
                        {activity.user.charAt(0)}
                      </div>
                      <div className="flex-1">
                        <p className="text-jing-white">
                          <span className="font-semibold">{activity.user}</span> {activity.action}
                          {activity.theater && <span className="text-zhu-hong"> {activity.theater}</span>}
                        </p>
                        <p className="text-jing-white/60 text-sm">{activity.time}</p>
                      </div>
                      <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                        <Heart size={16} className="text-jing-white" />
                      </button>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </div>
    </div>
  )
}

export default TheaterVision
